import React, { useEffect, useState } from 'react'
import { message, Tooltip } from 'antd'
import screenfull from 'screenfull'
import { useTranslation } from 'react-i18next'
const App = () => {
  const { t } = useTranslation()
  const [fullSrceen, setFullSrceen] = useState<boolean>(screenfull.isFullscreen)
  useEffect(() => {
    screenfull.on('change', () => {
      if (screenfull.isFullscreen) setFullSrceen(true)
      else setFullSrceen(false)
      return () => screenfull.off('change', () => {})
    })
  }, [])
  const handleFullScreen = () => {
    if (!screenfull.isEnabled) message.warning('当前您的浏览器不支持全屏 ❌')
    screenfull.toggle()
  }
  return (
    <Tooltip title={fullSrceen ? t('full-srceen') : t('close-full-srceen')}>
      <i
        className={['icon-style', 'iconfont', fullSrceen ? 'icon-suoxiao' : 'icon-fangda'].join(' ')}
        onClick={handleFullScreen}
      />
    </Tooltip>
  )
}

export default App
